<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米轮播图</title>
		<link rel="icon" type="text/css" href="https://s01.mifile.cn/favicon.ico" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
				;
			}

			/* 外层盒子布局 */
			.mi_slideshow_Tab {
				width: 1226px;
				height: 460px;
				margin: 50px auto;
				position: relative;
				background-color: antiquewhite;
			}

			.mi_img img {
				width: 1226px;
				position: absolute;
				cursor: pointer;
			}

			/* 指示器布局 样式*/
			.mi_slideshow_indicator {
				position: absolute;
				z-index: 2;
				right: 20px;
				bottom: 10px;
				transform: rotate(180deg);
			}

			.mi_slideshow_indicator>ul>li {
				display: inline-block;
				z-index: 2;
				width: 8px;
				height: 8px;
				background-color: #6d6d6d;
				border: 2px solid #565656;
				border-style: window-inset;
				border-radius: 45px;
				cursor: pointer;
				margin: 0 1px;
			}

			/* .mi_slideshow_indicator>ul>li:hover{
				background-color: #cecece;
			} */
			#pitch_on {
				background-color: #cecece;
			}

			/* 上一页按钮 下一页按钮 */
			.top_page,
			.next_page {
				width: 41px;
				height: 69px;
				z-index: 2;
				/* background-color: aqua; */
				position: absolute;
				border: none;
				top: 50%;
				margin-top: -34.5px;
				cursor: pointer;
			}

			.top_page {
				left: 234px;
				background: url(img/icon-slides.png) no-repeat -84px 50%;
			}

			.top_page:hover {
				background-position: 0px 50%;
			}

			.next_page {
				right: 0;
				background: url(img/icon-slides.png) no-repeat -125px 50%;
			}

			.next_page:hover {
				background-position: -42px 50%;
			}

			/* 侧边导航选项卡 样式*/
			.mi_Tab {
				width: 234px;
				height: 460px;
				background-color: rgba(105, 101, 101, .4);
				position: absolute;
				left: 0;
				z-index: 2;
			}

			.mi_Tab>ul {
				padding: 20px 0px;
			}

			.mi_Tab>ul>li {
				width: 234px;
				height: 42px;
				list-style: none;
				display: inline-block;
				box-sizing: border-box;
				position: relative;
			}

			.mi_Tab>ul>li>a {
				width: 234px;
				height: 42px;
				display: inline-block;
				text-decoration: none;
				color: #fff;
				line-height: 42px;
				font-size: 14px;
				padding-left: 30px;
				box-sizing: border-box;
			}

			.mi_Tab>ul>li>a:hover {
				background-color: #ff6700;
			}

			.mi_Tab>ul>li>a>span>img {
				color: #fff;
				width: 16px;
				position: absolute;
				right: 18px;
				top: 50%;
				margin-top: -8px;
			}

			/* 侧边选项卡悬浮展示的内容 样式*/
			.mi_Tab_con {
				width: 510px;
				height: 460px;
				position: absolute;
				left: 234px;
				z-index: 2;
				display: none;
				box-shadow: 5px 0px 10px #00ffff;
			}

			.mi_Tab_con ul {
				width: 992px;
				height: 460px;
				font-size: 30px;
				/* box-shadow: 0 0 10px #bebebe; */
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div class="mi_slideshow_Tab">
			<!-- 侧边选项卡 -->
			<div class="mi_Tab">
				<ul>
					<li>
						<a href="">
							手机 电话卡
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							电视 盒子
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							笔记本 显示器 平板
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							家电 插线板
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							出行 穿戴
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							智能 路由器
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							电源 配件
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							健康 儿童
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							耳机 音箱
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
					<li>
						<a href="">
							生活 箱包
							<span>
								<img src="img/jiantou01.svg">
							</span>
						</a>
					</li>
				</ul>
			</div>
			<!-- 侧选项卡 悬浮展示的内容 -->
			<div class="mi_Tab_con">
				<ul>
					第一个
				</ul>
				<ul>
					第二个
				</ul>
				<ul>
					第三个
				</ul>
				<ul>
					第四个
				</ul>
				<ul>
					第五个
				</ul>
				<ul>
					第六个
				</ul>
				<ul>
					第七个
				</ul>
				<ul>
					第八个
				</ul>
				<ul>
					第九个
				</ul>
				<ul>
					第十个
				</ul>
				<ul>
					第十一个
				</ul>
			</div>
			<!-- 底层轮播图 -->
			<div class="mi_slideshow">
				<!-- 轮播照片 -->
				<div class="mi_img">
					<img src="img/3a82846d975204e12923de52add19339.webp">
					<img src="img/5ade887b241d057d81e2de96590a1a6f.jpg">
					<img src="img/6ef43cf9f138a7fc3a39273d7e3d13b6.webp">
					<img src="img/ad9c1cb79a2eeb2d5ccf54dfa9782032.webp">
					<img src="img/be3a556e9cd1896f049c122a8bab3ce2.webp">
				</div>
				<!-- 上一页 -->
				<div class="top_page"></div>
				<!-- 下一页 -->
				<div class="next_page"></div>
				<!-- 轮播指示器 -->
				<div class="mi_slideshow_indicator">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li id="pitch_on"></li>
					</ul>
				</div>
			</div>
		</div>

		<script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 
			    轮播图的js,为了方便区分我写两个 
			 */
			$(function() {
				var img_index = $(".mi_img img").length - 1 //获取 图片的张数 -1 拿来当下标索引使用
				// 页面加载时启动定时器   全局定时器 timer
				var timer = setInterval(function() {
					$(".next_page").trigger("click");
				}, 7000);
				// 点击下一页按钮 触发方法 next_cut_slideshow
				$(".next_page").click(function() {
					img_index--;
					if (img_index < 0) {
						img_index = 4
					}
					next_cut_slideshow(img_index);
				});
				// 点击上一页按钮 触发方法 next_cut_slideshow
				$(".top_page").click(function() {
					img_index++;
					if (img_index > 4) {
						img_index = 0
					}
					next_cut_slideshow(img_index);
				});
				// 点击指示器按钮 触发方法 next_cut_slideshow
				$(".mi_slideshow_indicator>ul>li").click(function() {
					img_index = $(this).index();
					next_cut_slideshow(img_index);
				});
				// 定义轮播图切换方法
				// 点击后的切换方法
				function next_cut_slideshow(img_index) {
					$(".mi_img img:eq(" + img_index + ")").fadeIn().siblings().fadeOut();
					$(".mi_slideshow_indicator>ul>li:eq(" + img_index + ")").css({
						"background-color": "#cecece"
					}).siblings().css({
						"background-color": "#6d6d6d"
					});
				}
				//清除定时器方法  
				$(".mi_slideshow").hover(function() {
					clearInterval(timer);
				}, function() {
					timer = setInterval(function() {
						$(".next_page").trigger("click");
					}, 7000);
				});
			});

			/* 侧边选项卡 js 选项卡就很简单了，就一个悬浮显现跟隐藏*/
			$(function() {
				$(".mi_Tab>ul>li").hover(function() {
					var index_Tab = $(this).index(); //获取选项卡下标
					$(".mi_Tab_con").show() //悬浮 展现存放内容的div
					$(".mi_Tab_con ul:eq(" + index_Tab + ")").show().siblings().hide(); //展现对应下标的ul，隐藏其他的ul
				}, function() {
					$(".mi_Tab_con").hide() //离开隐藏
				});
			});
		</script>
	</body>
</html>
